<template>
  <div class="address_mange">
      <ul class="com">
          <li
          v-for="item in addressInfo" :key="item.id"
          >
              <a>
                  <address-item
                  :id="item.id"
                  :is_default="item.is_default"
                  :phone="item.phone"
                  :province="item.province"
                  :city="item.city"
                  :detail="item.detail"
                  :district="item.district"
                  :real_name="item.real_name"
                  @set-default="setDefault"
                  @delete-item="deleteItem"
                  ></address-item>
              </a>
          </li>
      </ul>

        <div class="add_address">
            <a href="#/user/add_address">
                <van-icon name="location-o" />添加新地址
            </a>
        </div>

  </div>
</template>

<script>
import AddressItem from "@/views/user/address/AddressItem.vue";

export default {
  data() {
    return {
      addressInfo: [],
      
    };
  },
  components: {
    AddressItem,
  },
  created() {
    this.addressData();
  },
  methods: {
    addressData() {
      console.log("xxx")
      let token = localStorage.getItem("token");
      let url = "/api/address/list?page=1&limit=20";
      let pro = axios({
        method: "get",
        url: url,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
            let { status , data } = res.data
            if(status == 200){
                this.addressInfo = data
                
                
            }
          console.log("成功", res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    setDefault(obj){
      // 排他思想
      this.addressInfo.forEach(item=>{
        item.is_default = 0 
      })

      this.addressInfo.some(item=>{
        if(item.id == obj.id){
          item.is_default = obj.is_default
          return
        }
      })
    },

    deleteItem(id){
      this.addressInfo.some((item,index)=>{
        if(id == item.id){
          this.addressInfo.splice(index,1)
          return
        }
      })
    }

  },
};
</script>

<style lang="scss" scoped>
.address_mange{
    padding-bottom: 60px;
    .com{
      li{
        margin-bottom: 10px;
      }
    }

    .add_address{
        height: 53px;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 15px;
        a{
            display: block;
            width: 100%;
            height: 40px;
            border-radius: 20px;
            background-color: #fc4141;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            > i{
                margin-right: 3px;
            }
        }
    }
}

</style>

